<template>
    <div class="main">
        <div class="container1">
            <div class="item1">
                <div class="item1-div1 div1">$</div>
                <div class="item1-div2 div2">
                    <p>患者总数</p>
                    <a href="/home/patientsManagement/patientsManagementHome">3</a>
                </div>
            </div>
            <div class="item1">
                <div class="item1-div1 div3">$</div>
                <div class="item1-div2 div2">
                    <p>跟进总数</p>
                    <a href="/home/patientsFollow/patientsFollowHome">3</a>
                </div>
            </div>
            <div class="item1">
                <div class="item1-div1 div4">$</div>
                <div class="item1-div2 div2">
                    <p>患者公海</p>
                    <a href="/home/patientsHighSeas/patientsHighSeasHome">2</a>
                </div>
            </div>
            <div class="item1">
                <div class="item1-div1 div5">$</div>
                <div class="item1-div2 div2">
                    <p>私有患者</p>
                    <a href="/home/patientsManagement/patientsManagementHome">1</a>
                </div>
            </div>
        </div>

        <div class="container2">
            <div class="zheXian">
                <el-card>
                    <p>跟进</p>
                    <!-- 2、为 ECharts 准备一个定义了宽高的 DOM -->
                    <div id="main" style="width: 855px;height:400px;"></div>
                </el-card>
            </div>
            <div class="bingTu">
                <el-card>
                    <p>地区</p>
                    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
                    <div id="main2" style="width: 855px;height:400px;"></div>
                </el-card>
            </div>
        </div>

        <div class="container3">
            <p>患者年度报告</p>
            <div>
                <template>
                    <el-table :data="tableData" border style="width: 100%">
                        <el-table-column
                        prop="date"
                        label="日期"
                        width="140">
                        </el-table-column>
                        <el-table-column
                        prop="month1"
                        label="1月"
                        width="140">
                        </el-table-column>
                        <el-table-column
                        prop="month2"
                        label="2月"
                        width="140">
                        </el-table-column>
                        <el-table-column
                        prop="month3"
                        label="3月"
                        width="140">
                        </el-table-column>
                        <el-table-column
                        prop="month4"
                        label="4月"
                        width="140">
                        </el-table-column>
                        <el-table-column
                        prop="month5"
                        label="5月"
                        width="140">
                        </el-table-column>
                        <el-table-column
                        prop="month6"
                        label="6月"
                        width="140">
                        </el-table-column>
                        <el-table-column
                        prop="month7"
                        label="7月"
                        width="140">
                        </el-table-column>
                        <el-table-column
                        prop="month8"
                        label="8月"
                        width="140">
                        </el-table-column>
                        <el-table-column
                        prop="month9"
                        label="9月"
                        width="140">
                        </el-table-column>
                        <el-table-column
                        prop="month10"
                        label="10月"
                        width="140">
                        </el-table-column>
                        <el-table-column
                        prop="month11"
                        label="11月"
                        width="140">
                        </el-table-column>
                        <el-table-column
                        prop="month12"
                        label="12月">
                        </el-table-column>
                    </el-table>
                </template>
            </div>
        </div>
        
    </div>
</template>
<script>
// 1、导入echarts
  import * as echarts from  'echarts'

export default {
// eslint-disable-next-line vue/multi-word-component-names
name:"",
components:{},
data(){
    return {
        tableData: [{
          date: '1日',
        }, {
          date: '2日',
        }, {
          date: '3日',
        },{
          date: '4日',
        },{
          date: '5日',
        },{
          date: '6日',
        },{
          date: '7日',
        },{
          date: '8日',
        },{
          date: '9日',
        },{
          date: '10日',
        },]
    }
    },
// 此时，页面上的元素已经被渲染完毕
mounted(){
    ///3、基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
      var myChart2 = echarts.init(document.getElementById('main2'));

    ///4、指定图表的配置项和数据
      var option = {
        title: {
          text: '周跟进统计',
          x:'center',
          y:'top'
        },
        tooltip: {},
        legend: {
        //   data: ['销量']
        },
        xAxis: {
          data: ['周一', '周二', '周三', '周四', '周五', '周六','周日']
        },
        yAxis: {},
        series: [
          {
            name: '',
            color:'red',
            type: 'line',
            smooth: true,
            data: [0, 1, 0, 1, 0, 1,0],
            areaStyle: {
                color: 'red',
                opacity:0.5
            }
          }
        ]
      };
      var option2 = {
        title: {
          text: '患者地区统计', //为图表配置标题
          x:'center',
          y:'top'
        },
        tooltip: {},
        legend: {
            orient: 'vertical',
            x:'left',
            y:'top'
        },
        series: [
          {
            name: '患者地区统计',// 系列名称
            type: 'pie',    // 设置图表类型为饼图
            radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
            data:[          // 数据数组，name 为数据项名称，value 为数据项值
                {value:2, name:'四川省'},
                {value:4, name:'重庆市'},
                {value:3, name:'广东省'},
                {value:5, name:'湖南省'},
                {value:1, name:'江苏省'}
            ]
          }
        ]
      };

    ///5、使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      myChart2.setOption(option2);
}
}
</script>
<style lang="less" scoped>
.container1{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.item1{
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
}
.div1,.div3,.div4,.div5{
    font-size: 40px;
    color: white;
    padding: 25px 40px;
    box-sizing: border-box;
}
.div1{
    background-color: rgb(60, 191, 243);
}
.div3{
    background-color: red;
}
.div4{
    background-color: green;
}
.div5{
    background-color: rgb(240, 149, 31);
}
.div2{
    background-color: white;
    width: 300px;
    height: 102px;
    padding: 10px;
    box-sizing: border-box;
}
.div2>a{
    text-decoration: none;
    font-weight: bolder;
    font-size: 18px;
}
.container2{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.container2 p{
    font-size: 20px;
    padding: 0 0 20px 0;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(128, 128, 128, 0.336);
    margin-bottom: 20px;
}
.container3{
    background-color: white;
    margin-top: 20px;
}
.container3 p{
    padding: 20px 10px;
    box-sizing: border-box;
    font-size: 20px;
}
</style>